<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="packaged/css/semantic.css">

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="packaged/javascript/semantic.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script type = "text/javascript" src = "packaged/datos/detalleDisco.json"></script>
<script type = "text/javascript" src = "packaged/javascript/cargaTablaDetalleDisco.js"></script>

<body>
  <script type="text/javascript">
        var sortingOrder = 'NumTrack';
  </script>
<div class="ui secondary pointing menu">
  
  <a href  = "bandas.html" class="item">
    <img class="ui mini image" src="packaged/images/music_store.png" alt="P&aacute;gina principal" title= "P&aacute;gina principal">
  </a>
  <a href  = "bandas.html" class="item">
    <i class="users icon"></i> Bandas
  </a>
  <a href  = "discos.html" class="active item">
      <img class="ui tiny image" align="left" src="packaged/images/acetato.png" alt="CDs/LPs" title= "CDs/LPs"></img>&nbsp; CDs/LPs 
  </a>
  
  <a href  = "tracks.html"class="item">
    <i class="music icon"></i> Tracks
  </a>
  <a href  = "clientes.html"class="item">
    <i class="user icon"></i> Clientes
  </a>
  <a href  = "dependientes.html"class="item">
      <img class="ui tiny image" align="left" src="packaged/images/dependiente.png" alt="Dependientes" title= "Dependientes"></img>&nbsp; Dependientes
  </a>
  
  <a href  = "galeria.html"class="item">
      <img class="ui tiny image" align="left" src="packaged/images/gallery.png" alt="Galer&iacute;a" title= "Galer&iacute;a"></img>&nbsp; Galer&iacute;a
  </a>



  <div class="right menu">
    <div class="item">
      <form action="paginaResultado.html" method="get">
        <div class="ui icon input">
          <input placeholder="Buscar..." type="text">
          <i class="search link icon" type="submit"></i>
        </div>
      </form>
    </div>

    <div class="item">
      <div class="ui icon input">
        <a href="listaCompras.html" class="item" alt="Lista de &oacute;rdenes" title = "Lista de &oacute;rdenes" >
          <i class="browser icon"></i>
        </a>
      </div>
    </div>


    <div class="item">
      <div class="ui icon input">
        <a href="carroCompras.html" class="item">
          <i class="cart icon"></i> carrito
        </a>
      </div>
    </div>


    <a class="ui item">
      Salir
    </a>

    
  </div>
</div>


<div class="four wide column ui grid">
  <div class="three wide column">
    <div class="ui vertical menu">
      <div class="header item">
        <img class="ui tiny image" align="left" src="packaged/images/gender00.png" alt="G&eacute;neros" title= "G&eacute;neros"></img>&nbsp; G&eacute;neros
      </div>
      <div class="menu">
        <a class="item"> Jazz </a>
        <a class="item"> Pop </a>
        <a class="item"> Rock </a>
        <a class="item"> Metal </a>
        <a class="item"> Acad&eacute;mica </a>
        <a class="item"> Country </a>
        <a class="item"> Blues </a>
        <a class="item"> Alternativa </a>
        <a class="item"> R & B </a>
      </div>
    </div>
  </div>


 <div class="eight wide column">
    <div class="ui breadcrumb">
      <a class="section">Discos</a>
      <div class="divider"> / </div>
      <a class="section">Detalle</a>
      <div class="divider"> / </div>
      <div class="active section"></div>
    </div>

    <h2 class="ui header">
      Detalle del Disco
    </h2>
    <div align="left">
      <table>
        <tbody>
          <tr><td><b>Banda</b></td><td>
            <div class="ui input"><input type="text" value = "Helloween"></div>
          </td></tr>

          <tr><td><b>Nombre</b></td><td>
            <div class="ui input"><input type="text" value = "Keeper of the Seven Keys Part II"></div>
          </td></tr>

          <tr><td><b>Publicaci&oacute;n</b></td><td>
            <div class="ui input"><input type="text" value = "1988"></div>
          </td></tr>
          
          <tr><td><b>G&eacute;nero</b></td><td>
            <div class="ui input"><input type="text" value = "Power metal"></div>
          </td></tr>
          
          <tr><td><b>Duraci&oacute;n</b></td><td>
            <div class="ui input"><input type="text" value = "54:33"></div>
          </td></tr>

          <tr><td><b>Lugar de lanzamiento</b></td><td>
            <div class="ui input"><input type="text" value = "Hannover, Alemania"></div>
          </td></tr>
        </tbody>
      </table>
      <div class="ui segment">
        <img class="ui small left floated image" src="packaged/images/helloweenkeeperofthesevenkeys2.jpg">
      </div>
      
      <a href = "discos.html">
        <div class="ui button">
          Guardar Disco
        </div>
      </a>
      <h2 class="ui header">
      Tracks
    </h2>
    <div class="middle aligned row">
      <div ng-app=""  ng-controller="ctrlRead"> 
        <div class="input-append">
                <input type="text" ng-model="query" ng-change="search()" class="input-large search-query" placeholder="Search">
            <span class="add-on"><i class="icon-search"></i></span>
            </div>

        <table class="table table-striped table-condensed table-hover ui inverted table segment">
                <thead>
                    <tr>
                        <th class="Track">Track&nbsp;<a ng-click="sort_by('Track')"><i class="icon-sort"></i></a></th>
                        <th class="NumTrack">No. Track&nbsp;<a ng-click="sort_by('NumTrack')"><i class="icon-sort"></i></a></th>
                        <th class="Duracion">Duraci&oacute;n&nbsp;<a ng-click="sort_by('Duracion')"><i class="icon-sort"></i></a></th>
                        <th class="Autor">Duraci&oacute;n&nbsp;<a ng-click="sort_by('Autor')"><i class="icon-sort"></i></a></th>
                        
                        
                    </tr>
                </thead>
                <tfoot>
                  <tr align="center">
                    <td colspan="6">
                        <div class="pagination pull-right ui pagination menu">
                          <a class="icon item" ng-repeat="n in range(pagedItems.length)" ng-class="{active: n == currentPage}" ng-click="setPage()">
                            <i class = "item" >{{n+1}}</i>
                          </a>                            
                        </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody>
                    <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
                        <td>{{item.Track}}</td>
                        <td>{{item.NumTrack}}</td>
                        <td>{{item.Duracion}}</td>
                        <td>{{item.Autor}}</td>
                        
                    </tr>
                </tbody>
            </table>
      </div>
      <a href = "agregarTrack.html">
        <div class="ui button">
          Agregar track
        </div>
      </a>

      <a href = "carroCompras.html">
        <div class="ui button">
          Agregar al carrito
        </div>
      </a>
    </div>



    </div>
    
 </div>




  <div class="five wide column">
    <h2 class="ui header">
      CDs m&aacute;s vendidos
    </h2>
     <div class="ui segment">
      <img class="ui small left floated image" src="packaged/images/helloweenkeeperofthesevenkeys2.jpg">
      <table>
        <tbody>
          <tr><td><b>Banda</b></td><td>Helloween</td></tr>
          <tr><td><b>&Aacute;lbum</b></td><td>Keeper of the Seven Keys Part II</td></tr>
          <tr><td><b>Publicaci&oacute;n</b></td><td>1988</td></tr>
          <tr><td><b>G&eacute;nero</b></td><td>Power metal</td></tr>
          <tr><td><b>Duraci&oacute;n</b></td><td>54:33</td></tr>
        </tbody>
      </table>
    </div>
    <div class="ui segment">
      <img class="ui small left floated image" src="packaged/images/Iron_Maiden_-_The_Number_Of_The_Beast.jpg">
      <table>
        <tbody>
          <tr><td><b>Banda</b></td><td>Iron Maiden</td></tr>
          <tr><td><b>&Aacute;lbum</b></td><td>The Number of the Beast</td></tr>
          <tr><td><b>Publicaci&oacute;n</b></td><td>1988</td></tr>
          <tr><td><b>G&eacute;nero</b></td><td>Power metal</td></tr>
          <tr><td><b>Duraci&oacute;n</b></td><td>54:33</td></tr>
        </tbody>
      </table>
    </div>
    <div class="ui segment">
      <img class="ui small left floated image" src="packaged/images/Bathory_Bathory.jpg">
      <table>
        <tbody>
          <tr><td><b>Banda</b></td><td>Bathory</td></tr>
          <tr><td><b>&Aacute;lbum</b></td><td>Bathory</td></tr>
          <tr><td><b>Publicaci&oacute;n</b></td><td>1984</td></tr>
          <tr><td><b>G&eacute;nero</b></td><td>Black metal</td></tr>
          <tr><td><b>Duraci&oacute;n</b></td><td>26:52</td></tr>
        </tbody>
      </table>
    </div>





  </div>

</div>

</body>
</html>